<template>
    <div class="son">
        <h1>Son组件</h1>
        <p>msg:{{msg}}</p>
        <p>username:{{username}}</p>
<!--        vue中规定：组件中封装的自定义props属性是只读的，不能直接修改props的值，如果想修改需要转存到data参数中修改-->
        <button @click="msg='修改了从父组件传来的值！'">修改了message</button>
    </div>
</template>

<script>
    export default {
        name: "Son",
        props:['message','username'],
        data(){
            return{
                msg:this.message
            }
        }
    }
</script>

<style scoped>

</style>